<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户管理</title>
    <link rel="stylesheet" href="/box/layui/css/layui.css">
    <link rel="stylesheet" href="/box/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="/box/layui/css/formSelects-v4.css">
    <script src="/box/layui/layui.js"></script>
    <script src="/box/js/jquery-3.3.1.js"></script>
    <script src="/box/js/jquery.ztree.all.js"></script>
    <script src="/box/js/config.js"></script>
    <link rel="shortcut icon" href="/box/assets/ico/minus.png">
    <style>
        .box-pad {
            padding: 1%;
        }
        #editUser {
            display: none;
            padding: 30px 50px 0 50px;
        }
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }
    </style>
</head>

<body>
    <div id="editUser">
        <form  class="layui-form" enctype="multipart/form-data" lay-filter="userForm" id="userForm">
            <input type="hidden" name="userId">
            <input type="hidden" name="headPortrait" id="headPortrait">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="eleAccount" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">加密颜值</label>
                    <div class="layui-input-inline">
                        <input type="text" name="salt" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">用户角色</label>
                    <div class="layui-input-inline" >
                        <select name="roleIds" id="roles_add" xm-select="roles2">
                            <option value="-1">请选择</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userName" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="sex" value="0" title="男" checked>
                        <input type="radio" name="sex" value="1" title="女">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">手机</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">身份证号</label>
                    <div class="layui-input-block">
                        <input type="text" name="identity" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-block">
                        <input type="text" name="birthday" class="layui-input" id="birthday" placeholder="yyyy-MM-dd">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upload"><i class="layui-icon">&#xe67c;</i>上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="look">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="box-pad">
        <h1>用户列表</h1>
        <hr>
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名：</label>
                    <div class="layui-inline">
                        <input type="text" id="username" class="layui-input" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">用户角色：</label>
                    <div class="layui-inline">
                        <select id="roles" xm-select="roles">
                            <option value="-1">请选择</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="layui-btn" onclick="selects()">查询</button>
            </div>
        </form>

        <table class="layui-hide" id="user" lay-filter="user"></table>

        <script>
            var table;

            function selects(){
                var roleIds = layui.formSelects.value("roles","val");
                layui.table.reload("user",{
                    page: {
                        //  从第一页开始
                        curr: 1
                    }
                    ,where: {
                        userName : $("#username").val(),
                        "roleIds" : roleIds.join(",")
                    }
                });
            }

            layui.config({
                base: '/box/layui/'
            }).extend({
                formSelects: 'formSelects-v4'
            });

            layui.use(['table','form','formSelects','upload','laydate'], function(){
                table = layui.table;
                var $ = layui.jquery;
                var form = layui.form;
                var select = layui.formSelects;
                var upload = layui.upload;
                var laydate = layui.laydate;

                upload.render({
                    elem: '#upload'
                    ,url: 'http://localhost:8888/file/upload'
                    ,before: function(obj){
                        obj.preview(function(index, file, result){
                            $('#look').attr('src', result);
                            $('#headPortrait').val('http://localhost:8888/images/' + file.name);
                        });
                    }
                });

                // 日期常规用法
                laydate.render({
                    elem: '#birthday'
                });

                $.get("http://localhost:8888/role/search",function (data) {
                    $.each(data,function () {
                        var options = $("<option></option>").appendTo("#roles");
                        options.text(this.roleName).val(this.roleId);
                    });
                    layui.formSelects.render();
                });

                table.render({
                    elem: '#user'
                    ,url: 'http://localhost:8888/user/list'
                    ,page: true
                    ,even: true
                    ,toolbar: '#toolbarDemo'
                    ,cols: [[
                        {type:'checkbox'}
                        ,{field:'userId', title: 'ID'}
                        ,{field:'userName', title: '用户名'}
                        ,{field:'sex', width: 60, title: '性别', templet : function (d) {
                                return d.sex == 0 ? '男' : '女'
                            }
                        }
                        ,{field:'address', title: '家庭住址'}
                        ,{field:'phone', title: '联系电话'}
                        ,{field:'eleRoles', title: '所属角色', templet:function (d) {
                                if (d.eleRoles == null) {
                                    return "-";
                                }
                                let s = "";
                                for (let role of d.eleRoles) {
                                    s += role.roleName + " "
                                }
                                return s;
                            }
                        }
                        ,{toolbar: '#barDemo'}
                    ]]
                });
                //头工具栏事件
                table.on('toolbar(user)', function(obj){
                    switch(obj.event){
                        case 'add':
                            layer.open({
                                type: 1,
                                title: "添加用户",
                                skin: "layui-layer-molv",
                                anim: 0,
                                area: "800px",
                                maxmin: true,
                                content: $("#editUser"),
                                btn: ['确定','取消'],
                                success: function () {
                                    $('#userForm')[0].reset();
                                    $.get("http://localhost:8888/role/search",function (data) {
                                        $.each(data,function () {
                                            var options = $("<option></option>").appendTo("#roles_add");
                                            options.text(this.roleName).val(this.roleId);
                                        });
                                        layui.formSelects.render();
                                    });
                                },
                                yes: function () {
                                    var str = $("#userForm").serialize();
                                    $.post(`${new Config().base_url}/user/add`,str, das => {
                                        layer.close(layer.index);
                                        table.reload("user");
                                    });
                                }
                            });
                            break;
                        // case 'batchDelete':
                        //     //  获取选中行
                        //     var checkStatus = table.checkStatus(obj.config.id);
                        //     var data = checkStatus.data;
                        //     if (data.length == 0) {
                        //         layer.msg('请选择要删除的数据行');
                        //         return;
                        //     }
                        //     layer.confirm("确定要删除选中行的数据吗？", function (index) {
                        //         var p = "";
                        //         for (let user of data) {
                        //             p += `ids=${user.userId}&`;
                        //         }
                        //         $.post(`http://localhost:8888/user/batchDelete?${p}`, d => {
                        //             layer.close(index);
                        //             table.reload("user",{
                        //                 page: {
                        //                     curr: 1
                        //                 }
                        //             });
                        //         });
                        //     });
                        //     break;
                    }
                });

                //  监听行内的工具条，删除、修改
                table.on('tool(user)', function (obj) {
                    var data = obj.data;
                    var layEvent = obj.event;

                    if (layEvent === 'del') {  // 删除
                        // layer.confirm('真的要删除吗？', function (index) {
                        //     //  关闭当前弹窗
                        //     layer.close(index);
                        //     //  发送异步请求
                        //     $.post("http://localhost:8888/user/delete", {id:data.userId}, function (da) {
                        //         table.reload("user",{
                        //             page: {
                        //                 curr: 1
                        //             }
                        //         });
                        //     });
                        // });
                    } else if (layEvent === 'edit') {  // 编辑
                        layer.open({
                            type: 1,
                            title: "修改用户",
                            //  皮肤
                            skin: "layui-layer-molv",
                            //  动画
                            anim: 0,
                            area: "800px",
                            maxmin: true,
                            content: $("#editUser"),
                            btn: ['确定', '取消'],
                            success: function () {
                                form.val('userForm',data);
                                $("input[name=sex][value='0']").attr("checked", data.sex == 0 ? true : false);
                                $("input[name=sex][value='1']").attr("checked", data.sex == 1 ? true : false);

                                //  获取角色ID
                                var rIds = [];
                                for (let role of data.eleRoles) {
                                    rIds.push(role.roleId);
                                }
                                var t = setInterval(function () {
                                    if ($("#roles_add option").length > 1) {
                                        select.value("roles2", rIds);
                                        clearInterval(t);
                                    }
                                }, 100);
                            },
                            yes: function () {
                                var str = $("#userForm").serialize();
                                $.post(`${new Config().base_url}/user/update`, str, das => {
                                    layer.close(layer.index);
                                    table.reload("user");
                                });
                            }
                        })
                    }
                });
            });
        </script>
        <!--  编辑、删除按钮  -->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
        </script>
        <!--  表格上面的工具栏按钮  -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
                <!--<button class="layui-btn layui-btn-sm" lay-event="batchDelete">批量删除</button>-->
            </div>
        </script>
    </div>
</body>
</html>